<template>
  <div>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>分类列表</el-breadcrumb-item>
      </el-breadcrumb>
       <br>
        <div class="bk">
          <el-input   placeholder="分类名" v-model="cateName"></el-input>
        <el-button class="ss el-icon-search" type="primary" @click="select">搜索</el-button>
        <el-button class="ss" type="info" @click="dialogTable=true">添加</el-button>
           <!-- 信息 -->
       
       <el-table
      :data="omoList"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="id" label="#" sortable width="180" />
      <el-table-column prop="cateName" label="分类名称" sortable />
        <el-table-column label="操作" >
           <template #default="scope">
            <el-button type="primary" :icon="Edit" @click.prevent="updeagoods(scope.row.id,scope.row.cateName)"></el-button>
              <el-button type="danger" :icon="Delete" @click.prevent="deleteRow(scope.row.id)"></el-button>
         </template>
          </el-table-column>
    </el-table>
                <!-- 分页 -->
         <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[5,10,15]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="count">
    </el-pagination>
  <!-- 修改 -->
    <el-dialog
        class="dia1"
           v-model="dialogTableVisible"
            width="45%"
            :before-close="handleClose"
            >
             <div class="yh">
              <label>分类名:</label> 
              <el-input placeholder="分类名" v-model="name"></el-input>
            </div>
             <br>
            <span :v-slot="footer" class="dialog-footer">
              <el-button class="bj" type="primary" @click="updea">编辑</el-button>
              <el-button class="bj" type="warning" @click="dialogTableVisible = false">取消</el-button>
            </span>
    </el-dialog>
    <!-- 添加 -->
      <el-dialog
        class="dia1"
           v-model="dialogTable"
            width="45%"
            :before-close="handleClose"
            >
            <div class="yh">
              <label>分类名:</label> 
              <el-input placeholder="分类名" v-model="addsj"></el-input>
             
            </div>
            <div class="yh">
              <label>父级分类:</label> 
              <el-cascader :options="omoList" :props="props1" clearable :show-all-levels="false"  v-model="pid"/>
            </div>
            <br>
            <span :v-slot="footer" class="dialog-footer">
              <el-button class="bj" type="primary" @click="add">添加</el-button>
              <el-button class="bj" type="warning" @click="dialogTable = false">取消</el-button>
            </span>
          </el-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import { ArrowDown } from '@element-plus/icons-vue'
import { ref, reactive,computed,toRefs,onMounted} from "vue";
import { useRouter } from 'vue-router';
import httpRequest from '../service';
import { ElMessage,ElMessageBox } from 'element-plus';
import {
  Search,
  Edit,
  Check,
  Message,
  Star,
  Delete,
} from '@element-plus/icons-vue'


interface DataProps{
      cateName:string,
      pageNo:number,
      pageSize:number,
      select:()=>void,
      omoList:[],
      updeagoods:(id:any,cateName:string)=>void,
      id:number,
      dialogTableVisible:boolean,
      name:string,
      updea:()=>void,
      deleteRow:(id:any)=>void,
      dialogTable:boolean,
      add:()=>void,
      addsj:string,
      getlev:()=>void,
      pid:any,
      list:[],
      handleSizeChange:(val: number)=>void,
      handleCurrentChange:(val: number)=>void,
       count:number,
       props1:any

}
export default {
  name:'goods',
  setup(){
    const data:DataProps=reactive({
      cateName:"",
      pageNo:1,
      pageSize:5,
      omoList:[],
      id:0,
      dialogTableVisible:false,
      dialogTable:false,
      name:"",
      addsj:"",
      pid:0,
      list:[],
      count:0,
    props1 :{
    checkStrictly: true
    },
       handleSizeChange:(val: number)=>{
          data.pageSize=val
          data.select()
      },
      handleCurrentChange:(val: number)=>{
            data.pageNo=val
             data.select()
      },
      select:()=>{
  httpRequest
  .request({
    url: '/goodscategory/gethaschildren',
    method: 'post',
    data:{
      cateName:data.cateName,
      pageNo:data.pageNo,
      pageSize:data.pageSize
    },
    interceptors: {
      requestInterceptor: (config) => {
        console.log(config)
        return config
      }
    }
  })
  .then((res:any) => {
    // data.count=res.data.count
    data.count=res.data.count
    let {rows}=res.data
    data.omoList=rows   
    // console.log(rows);
    // return
    for(let i=0;i<rows.length;i++){
         rows[i].label=rows[i].cateName
        rows[i].value=rows[i].id
         for(let j=0;j<rows[i].children.length;j++){
              rows[i].children[j].label=rows[i].children[j].cateName
             rows[i].children[j].value=rows[i].children[j].id    
               for(let z=0;z<rows[i].children[j].children.length;z++){
                     rows[i].children[j].children[z].label=rows[i].children[j].children[z].cateName
                     rows[i].children[j].children[z].value=rows[i].children[j].children[z].id
                       rows[i].children[j].children[z].disabled=true  
               }
         }
      console.log(rows[i]);
       }
      
  
  })
    },
    //修改获取idrow
     updeagoods:(id:any,cateName:string)=>{
      data.dialogTableVisible=true
      data.id=id 
      data.name=cateName
      console.log(id,cateName)
      
     },
     //修改
     updea:()=>{
              httpRequest
    .request({
      url: '/goodscategory/updgoodscategory',
      method: 'post',
      data:{
        id:data.id,
        cateName:data.name
      }
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
    
      console.log(res);
      if(res.code===200){
          ElMessage({
      message: '修改成功',
      type: 'success',
        })
      data.dialogTableVisible=false 
      data.select()
      }else{
        ElMessage.error('修改失败')
      }
      
    })
        
     },
     //删除
     deleteRow:(id:any)=>{
        ElMessageBox.confirm(
    '确定需要删除吗？',
    '删除',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
            httpRequest
    .request({
      url: '/goodscategory/delgoodscategory',
      method: 'post',
      data:{
      id
      },
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
      if(res.code===200){
          ElMessage({
      message: '删除成功',
      type: 'success',
        })
      data.select()
      }else{
        ElMessage.error('删除失败')
      }
      console.log(res);
      
    })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
     },
    //添加
    add:()=>{
        let pid=data.pid
        var pida
        if(pid===0){
         pida =pid
        } else if(pid===null){
            pida =0
        }
        else{
          pida=pid[pid.length-1]
        }
           httpRequest
    .request({
      url: '/goodscategory/addgoodscategory',
      method: 'post',
      data:{
        cateName:data.addsj,
        catePid:pida
      }
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
    
      console.log(res);
      if(res.code===200){
      ElMessage({
      message: '添加成功',
      type: 'success',
        })
        data.addsj=""
      data.dialogTable=false 
      data.select()
      }else{
        ElMessage.error('添加失败')
      }
    })
  
    },
    getlev:()=>{
               httpRequest
    .request({
      url: '/goodscategory/getlevel',
      method: 'post',
      data:{
       pid:data.pid
      }
      ,
      interceptors: {
        requestInterceptor: (config) => {
          console.log(config)
          return config
        }
      }
    })
    .then((res:any) => {
      
      data.list=res.data
      // console.log(res);
      
     
       for(let i=0;i<=res.data.length;i++){
        //  console.log(res.data[i]);
         res.data[i].label=res.data[i].cateName
         res.data[i].value=res.data[i].id
       }
        console.log(res.data);
       
      
    })
    }

    })
onMounted(()=> {
  data.select()
  data.getlev()
})
     const refData=toRefs(data)
  return{
    ...refData,
     Search,
    Edit,
    Check,
    Message,
    Star,
    Delete
  }

  }

}
</script>

<style lang="less" scoped>
.bk{
  border: 1px solid #cfd1d4;
  padding: 20px 20px 20px 20px;
  border-radius: 20px;
}

.el-button {
 
  width: 30px;
  height: 20px;
 padding:  0;
  font-size: 10px;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.el-input{
  width: 100px;
  float: left;
}
.el-cascader{
   width: 100px;
  float: left;
}
.ss{
  float: left;
  width: 60px;
  height:40px;
  margin-left:10px;
}
.dialog-footer{
  margin-top:-20px;
  float: left;
}
.yh{
  width: 100%;
  display: flex;
  justify-content: space-around;
  margin-top:15px;
  line-height:45px;
}
.yh .el-input{
    width:80%;
    height:25px;
    margin: 0px 0;
    
}
.dia1{
  height: 400px;
}
.bj{
  width: 50px;
  height:30px;
  margin-left: 200px;
  margin-top: 10px;
}
.foot2{
  float: right;
}
.op{
  margin-left:-210px;
  margin: auto 0;
}


</style>